<template>
  <div class="box">
    <div class="box-title">{{userInfo.storeName}}</div>
    <div class="box-desc">
      <span>服务：{{userInfo.serviceScore}}</span>
      <span>交货：{{userInfo.deliveryScore}}</span>
      <span>评价：{{userInfo.descriptionScore}}</span>
    </div>
    <div class="box-order flex">
      <div class="box-order-item flex" v-for="(item,index) in orderWay" :key="index">
        <div class="value">{{item.value}}</div>
        <div class="title">{{item.title}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import storage from "@/utils/storage.js"; //缓存
export default {
  data() {
    return {
      userInfo: {}, //店铺信息
      statisticsData: {}, //统计信息
      orderWay: [
        {
          title: "待付款",
          key: "unPaidOrder",
          value: "0",
        },
        {
          title: "待发货",
          key: "unDeliveredOrder",
          value: "0",
        },
        {
          title: "待收货",
          key: "deliveredOrder",
          value: "0",
        },
        {
          title: "待评价",
          key: "commentNum",
          value: "0",
        },
        {
          title: "待对账",
          key: "waitPayBill",
          value: "0",
        },
      ],
    };
  },
  props: ["res"],
  watch: {
    res: {
      handler(val) {
        // 判断父级是否给子级调用数据
        if (typeof val == "object") {
          Object.keys(val).map((key) => {
            this.orderWay.map((item) => {
              if (key == item.key) {
                this.$set(item, "value", val[key]);
              }
            });
          });
        }
      },
      immediate: true,
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化信息
    init() {
      if (storage.getUserInfo().id) {
        this.userInfo = storage.getUserInfo(); //从缓存中获取店铺信息
      } else {
        uni.reLaunch({
          url: "/pages/passport/login",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/pages/tabbar/home/template/styles.scss";
@media screen and(min-width:750px) {
	.box{
		margin-top: 100rpx !important;
	}
}
.box-order-item {
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.box-order {
  align-items: center;
  justify-content: space-between;
}
.box-title {
  font-size: 40rpx !important;
}
.box-desc {
  margin-top: 15rpx;
  margin-bottom: 35rpx;
  font-size: 24rpx;
  > span {
    margin-right: 10rpx;
  }
}
</style>